<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="head.jsp" %>
<epg:html>
<epg:head>
<%@include file="../common/weixin_head.jsp" %>
<style>
.rc_btn {
	position: absolute;
	width: 310px;
	height: 310px;
	margin-left: 100px;
	margin-top: 100px;
}

#min_rc {
	position: absolute;
	background-image: url('images/bg.png');
	width: 520px;
	height: 620px;
}

#rc_min_bg {
	background-image: url('images/rc-min-bg.png');
}

#rc_btn_left {
	background-image: url('images/btn-left-s.png');
	display: none;
}

#rc_btn_rigth {
	background-image: url('images/btn-right-s.png');
	display: none;
}

#rc_btn_up {
	background-image: url('images/btn-up-s.png');
	display: none;
}

#rc_btn_down {
	background-image: url('images/btn-down-s.png');
	display: none;
}

#rc_btn_ok {
	background-image: url('images/btn-ok-s.png');
	display: none;
}

#rc_btn_close {
	width: 82px;
	height: 82px;
	left: 440px;
	top: 0px;
	background-image: url('images/btn-close.png');
}

.rc_icon {
	position: absolute;
	width: 84px;
	height: 84px;
}

#rc_btn_vol1 {
	top: 400px;
	left: 50px;
	background-image: url('images/btn-vol-.png');
}

#rc_btn_vol2 {
	top: 480px;
	left: 50px;
	background-image: url('images/btn-vol+.png');
}

#rc_btn_stop {
	top: 400px;
	left: 380px;
	background-image: url('images/btn-stop.png');
}

#rc_btn_return {
	top: 480px;
	left: 380px;
	background-image: url('images/btn-return.png');
}

#rc_btn_full {
	top: 480px;
	left: 170px;
	width: 175px;
	background-image: url('images/btn-full.png');
}

#left-triangle {
	width: 0;
	height: 0;
	left: 10px;
	top: 82px;
	border-right: 70px solid transparent;
	border-top: 70px solid transparent;
	border-bottom: 70px solid transparent;
}

#right-triangle {
	width: 0;
	height: 0;
	left: 230px;
	top: 82px;
	border-left: 70px solid transparent;
	border-top: 70px solid transparent;
	border-bottom: 70px solid transparent;
}

#down-triangle {
	width: 0;
	height: 0;
	left: 84px;
	top: 230px;
	border-top: 70px solid transparent;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
}

#up-triangle {
	width: 0;
	height: 0;
	left: 84px;
	top: 10px;
	border-bottom: 70px solid transparent;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
}

#circle {
	width: 100px;
	height: 100px;
	left: 104px;
	top: 106px;
	background: transparent;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	border-radius: 70px;
}
</style>
<script>
var playCtrlCmd = new Object();
var stbs = weixinOption.bind;
function RC() {
	var	KEY_ENUM={
			KEY_0:48,KEY_1:49,KEY_2:50,KEY_3:51,KEY_4:52,
			KEY_5:53,KEY_6:54,KEY_7:55,KEY_8:56,KEY_9:57,
			KEY_MUTE:261,KEY_AUDIO:262,
			KEY_F1:275,KEY_2:276,KEY_F3:277,KEY_4:278,
			KEY_UP:38,KEY_DOWN:40,KEY_RIGHT:39,KEY_LEFT:37,
			KEY_OK:13,KEY_RETURN:8,KEY_HOME:272,
			KEY_PLAY_PAUSE:263,KEY_STOP:270,
			KEY_VOL_UP:259,KEY_VOL_DOWN:260,
			KEY_PAGE_UP:33,KEY_PAGE_DOWN:34,
			KEY_CHANNEL_UP:257,KEY_CHANNEL_DOWN:258,
			KEY_REWIND:265,KEY_FORWARD:264,KEY_LOCATION:271,
			KEY_INFO:268,KEY_APP:279,
			KEY_START:283,KEY_F:280,KEY_PLAY:768
	}
	this.keypress=function(ctrl, value){
		alert("key:"+value);
		playCtrlCmd = new PlayCtrlCmd("playctrl", ctrl, value);
		playCtrlCmd.type = "vod";
		playCtrlCmd.stbNo = stbs[0].stbNo;
		stbCtrl.ctrl(playCtrlCmd);
	}
	this.keyNum=function(value){
		this.keypress("keyNum", KEY_ENUM.KEY_0+value);
	}
	this.left=function(){
		this.keypress("left", KEY_ENUM.KEY_LEFT)
	}
	this.right=function(){
		this.keypress("right", KEY_ENUM.KEY_RIGHT)
	}
	this.up=function(){
		this.keypress("up", KEY_ENUM.KEY_LEFT)
	}
	this.down=function(){
		this.keypress("down", KEY_ENUM.KEY_DOWN)
	}
	this.enter=function(){
		this.keypress("enter", KEY_ENUM.KEY_OK)
	}
	this.back=function(){
		this.keypress("back", KEY_ENUM.KEY_RETURN)
	}
	this.volUp=function(){
		this.keypress("volUp", KEY_ENUM.KEY_VOL_UP);
	}
	this.volDown=function(){
		this.keypress("volDown", KEY_ENUM.KEY_VOL_DOWN);
	},
	this.resumeOrPause=function(){
		this.keypress("resumeOrPause", KEY_ENUM.KEY_PLAY_PAUSE);
	},
	this.full=function(){
		//keypress('full')
	},
	this.close=function(){
		$('#min_rc').hide();
	}

};
var rc = new RC();	
</script>
</epg:head>
<div id="min_rc">
	<div id="rc_btn_close" onclick="rc.close()"></div>
	<div id="rc_min_bg" class="rc_btn">
		<div id='left-triangle' onclick="rc.left()"></div>
		<div id="right-triangle" onclick="rc.right()"></div>
		<div id='up-triangle' onclick="rc.up()"></div>
		<div id="down-triangle" onclick="rc.down()"></div>
		<div id="circle" onclick="rc.enter()"></div>
	</div>

	<div id="line1">
		<div id="rc_btn_vol1" class="rc_icon" onclick="rc.volDown()"></div>
		<div id="rc_btn_stop" class="rc_icon" onclick="rc.resumeOrPause()"></div>
	</div>

	<div id="line2">
		<div id="rc_btn_vol2" class="rc_icon" onclick="rc.volUp()"></div>
		<div id="rc_btn_full" class="rc_icon" onclick="rc.full()"></div>
		<div id="rc_btn_return" class="rc_icon" onclick="rc.back()"></div>
	</div>

</div>
</epg:html>
